<template>
    <el-collapse style="width: 97%">
        <el-collapse-item name="1" class="collapse">
            <template #title>
                <span class="collapseTitle">
                    反馈组件
                </span>
            </template>
            <div>
                <draggable
                    :list="list"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    animation="300"
                    :force-fallback="true"
                    :sort="false"
                    :group="{name:'lowcode',pull:'clone',put:false}"
                    @start="onStart"
                    :clone="cloneDefaultField"
                    item-key="sourceId"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            {{ element.name }}
                        </div>
                    </template>
                </draggable>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script name="FeedBackIndex" setup lang="ts">
import {deepCopy} from "@/utils/ywuCommon";
import {ref} from "vue";

let list = ref([
    {
        name: "对话框", title: "对话框编辑", component: "DialogComponent", drawerComponent: "DialogComponentDrawer", sourceId: 1,
        propJson: {
            editFlag: true,
            dialogVisibleParam: "",
            title: "",
            width: "",
            titleIsCenter: false,
            dialogIsCenter: false,
            isDraggable: false,
            innerComponentList: [
                {
                    name: "普通SPAN", title: "SPAN文字编辑", component: "SpanComponent", drawerComponent: "SpanDrawer", sourceId: 32,
                    propJson: {type: "custom", customInfo: "span字体", variableName: "", apiPath: "",
                        actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
                    }
                }
            ]
        }
    },
    {
        name: "抽屉框", title: "抽屉框编辑", component: "DrawerComponent", drawerComponent: "DrawerComponentDrawer", sourceId: 2,
        propJson: {
            editFlag: true,
            drawerVisibleParam: "", // 控制抽屉开关的变量
            title: "", // 抽屉标题
            width: "", // 抽屉宽度
            isModal: true, // 是否开启遮罩层
            isShowClose: false, // 是否开启关闭
            direction: "rtl", // 抽屉打开方向
            isCloseOnClickModal: false, // 是否开启点击遮罩层关闭
            openDrawerDelay: "0", // 开启抽屉延时
            closeDrawerDelay: "0", // 关闭抽屉延时
            innerComponentList: [ // 抽屉中配置的组件元素列表
                {
                    name: "普通SPAN", title: "SPAN文字编辑", component: "SpanComponent", drawerComponent: "SpanDrawer", sourceId: 32,
                    propJson: {type: "custom", customInfo: "span字体", variableName: "", apiPath: "",
                        actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", responseType: "default", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
                    }
                }
            ]
        }
    }
]);

function cloneDefaultField(e) {
    let copyE = deepCopy(e);
    copyE.ruleInfo = {
        ruleInfoList: []
    }
    return copyE;
}

function onStart(e) {
    e.item._underlying_vm_.id = generateUUID();
}

function randomNumber() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}

function generateUUID() {
    return (randomNumber() + randomNumber() + "-" + randomNumber() + "-" + randomNumber() +
        "-" + randomNumber() + "-" + randomNumber() + randomNumber() + randomNumber());
}
</script>

<style scoped lang="less">
.collapse {
    .collapseTitle {
        padding-left: 2%;
        font-size: 15px;
        font-weight: bold;
    }
    .ghostClass {

    }
    .chosenClass {

    }
    .itemClass {
        font-size: 13px;
        color: #606266;
        text-align: center;
        width: 90%;
        line-height: 250%;
        margin-left: 5%;
        //去除光标
        caret-color: transparent;
        background-color: #FAFCFF;
        transition: box-shadow 0.3s ease;
        border: 1px solid #F0F2F5;
        border-radius: 5px;
        margin-bottom: 2%;
    }
    .itemClass:hover{
        cursor: pointer;
        color: #409EFF;
        background-color: #EBEEF5;
    }
}
</style>